/*
双飞翼栅格布局 Flying Swing Grids wrapper
理念：简单质朴，语义化布局。
*/

/* 居中 */
.top-header, .content, .footer {
    margin-left: auto;
    margin-right: auto;
}

/** 布局基础样式 **/
.col-main {
    float: left;
    width: 100%;
    /* bug fix: 主栏没有内容时，在 Firefox 和 Chrome 等浏览器下，布局不对 */
    min-height: 1px;
    height: 100%;
}
.col-sub, .col-extra {
    float: left;
    height: 100%;
    /*position: relative;  按需设置，仅在需要时添加 */
}

/** 清除浮动 **/
.wrapper:after, .main-wrap:after, .col-sub:after, .col-extra:after {
	content: '\20';
	display: block;
	height: 0;
	clear: both;
}
.main-wrap, .col-sub, .col-extra {
    position: relative;
    /**zoom: 1;*/
}
.wrapper {
	height: 100%;
    margin:0 auto;
}
.main-wrap {
    height: 100%;
}
.autoIframe { width: 100%; height: 100%; }
/* div.wrapper.grid-s4m0>(div.col-main>div.main-wrap)+div.col-sub
====================================*/
/*
36栅格 width:80%; minWidth:990px;
采用了 10 种栅格布局：
auto                  .grid-m
200    auto           .grid-s6m0
auto   200            .grid-m0s6
250    auto           .grid-s9m0
auto   250            .grid-m0s9
330    auto           .grid-s12m0
auto   330            .grid-m0s12

250    auto   200     .grid-s9m0e6
200    auto   250     .grid-s6m0e9
auto   250    200     .grid-m0e9s6
*/

/** 两栏结构（带隐藏/显示按钮） **/
/* 按钮定义 */
.withTrigger { position: relative; }
.trigger-s { display: none; position: absolute; top: 0; bottom: 0; width: 9px; border-width:0 0 0 1px; border-style:solid; border-color:#DCDCD7; overflow: hidden; }
.withTrigger .trigger-s { display: block; }
.withTrigger .trigger-s a { display: block; height: 100%; background: #f4f4f4; position: relative; }
.withTrigger .trigger-s a:hover { background: #efefef; }
.withTrigger .trigger-s a .ico { width: 9px; position: absolute; top: 50%; margin-top: -9px; }
.grid-m0s6.withTrigger .trigger-s,
.grid-m0s9.withTrigger .trigger-s,
.grid-m0s12.withTrigger .trigger-s { border-width:0 1px 0 0; }
.grid-s6m0e9.withTrigger .trigger-left,.grid-s6m0e9.withTrigger .trigger-right {border-width:0 1px;}

/* 展开边栏的定义 */
.grid-s6m0.withTrigger .main-wrap { margin-left: 210px; }
.grid-s6m0.withTrigger .trigger-s { left: 200px; }
.grid-s9m0.withTrigger .main-wrap { margin-left: 260px; }
.grid-s9m0.withTrigger .trigger-s { left: 250px; }
.grid-s12m0.withTrigger .main-wrap { margin-left: 380px; }
.grid-s12m0.withTrigger .trigger-s { left: 370px; }

.grid-m0s6.withTrigger .main-wrap { margin-right: 210px; }
.grid-m0s6.withTrigger .trigger-s { right: 200px; }
.grid-m0s9.withTrigger .main-wrap { margin-right: 260px; }
.grid-m0s9.withTrigger .trigger-s { right: 250px; }
.grid-m0s12.withTrigger .main-wrap { margin-right: 380px; }
.grid-m0s12.withTrigger .trigger-s { right: 370px; }

.grid-s6m0e9.withTrigger .main-wrap {margin-left:210px;margin-right:260px;}
.grid-s6m0e9.withTrigger .trigger-left {left:200px;}
.grid-s6m0e9.withTrigger .trigger-right {right:250px;}
.grid-s6m0e9.withoutLTrigger .main-wrap {margin-left:0;}
.grid-s6m0e9.withoutRTrigger .main-wrap {margin-right:0;}
.withoutLTrigger .col-sub,.withoutRTrigger .col-extra {display:none;}
.grid-s6m0e9.withoutLTrigger .trigger-left {left:0;}
.grid-s6m0e9.withoutRTrigger .trigger-right {right:0;}

/* 隐藏边栏的定义 */
.grid-s6m0.grid-m .trigger-s,
.grid-s9m0.grid-m .trigger-s,
.grid-s12m0.grid-m .trigger-s { left: 0;}
.grid-m0s6.grid-m .trigger-s,
.grid-m0s9.grid-m .trigger-s,
.grid-m0s12.grid-m .trigger-s { right: 0;}

.grid-m.grid-s6m0 .main-wrap,
.grid-m.grid-s9m0 .main-wrap,
.grid-m.grid-s12m0 .main-wrap { margin-left: 10px; }
.grid-m.grid-m0s6 .main-wrap,
.grid-m.grid-m0s9 .main-wrap,
.grid-m.grid-m0s12 .main-wrap { margin-right: 10px; }
/* 箭头向左 */
.grid-s6m0 .trigger-s a .ico,
.grid-m0s6.grid-m .trigger-s a .ico,
.grid-s9m0 .trigger-s a .ico,
.grid-m0s9.grid-m .trigger-s a .ico,
.grid-s12m0 .trigger-s a .ico,
.grid-m0s12.grid-m .trigger-s a .ico,
.grid-s6m0e9.withoutRTrigger .trigger-right a .ico { background-position: -55px -196px; }
.grid-s6m0 .trigger-s a:hover .ico,
.grid-m0s6.grid-m .trigger-s a:hover .ico,
.grid-s9m0 .trigger-s a:hover .ico,
.grid-m0s9.grid-m .trigger-s a:hover .ico,
.grid-s12m0 .trigger-s a:hover .ico,
.grid-m0s12.grid-m .trigger-s a:hover .ico,
.grid-s6m0e9 .trigger-left a:hover .ico,
.grid-s6m0e9.withoutRTrigger .trigger-right a:hover .ico { background-position: -55px -220px; }
/* 箭头向右 */
.grid-m0s6 .trigger-s a .ico,
.grid-s6m0.grid-m .trigger-s a .ico,
.grid-m0s9 .trigger-s a .ico,
.grid-s9m0.grid-m .trigger-s a .ico,
.grid-m0s12 .trigger-s a .ico,
.grid-s12m0.grid-m .trigger-s a .ico,
.grid-s6m0e9 .trigger-s a .ico,
.grid-s6m0e9 .trigger-right a .ico,
.grid-s6m0e9.withoutLTrigger .trigger-left a .ico{ background-position: -79px -196px; }
.grid-m0s6 .trigger-s a:hover .ico,
.grid-s6m0.grid-m .trigger-s a:hover .ico,
.grid-m0s9 .trigger-s a:hover .ico,
.grid-s9m0.grid-m .trigger-s a:hover .ico,
.grid-m0s12 .trigger-s a:hover .ico,
.grid-s12m0.grid-m .trigger-s a:hover .ico,
.grid-s6m0e9 .trigger-right a:hover .ico,
.grid-s6m0e9.withoutLTrigger .trigger-left a:hover .ico{ background-position: -79px -220px; }

.grid-s6m0e9 .trigger-left a .ico {background-position: -55px -196px;}

/** 通栏布局 **/
.grid-m .main-wrap, .grid-m.withTrigger .main-wrap { margin:0; }
.grid-m .col-sub,
.grid-m.withTrigger .col-sub,
.grid-m .col-extra,
.grid-m.withTrigger .col-extra { display: none; }

/** 两栏布局 **/
.grid-s6m0 .main-wrap { margin-left: 200px; margin-right: 0; border-left: 1px solid #DCDCD7; }
.grid-s6m0 .col-sub { width: 200px; margin-left: -100%; margin-right: 0; }
.grid-s6m0 .col-extra { display: none; }

.grid-m0s6 .main-wrap { margin-right: 200px; margin-left: 0; border-right: 1px solid #DCDCD7; }
.grid-m0s6 .col-sub { width: 200px; margin-left: -200px; margin-right: 0; }
.grid-m0s6 .col-extra { display: none; }

.grid-s9m0 .main-wrap { margin-left: 250px; margin-right: 0; border-left: 1px solid #DCDCD7; }
.grid-s9m0 .col-sub { width: 250px; margin-left: -100%; margin-right: 0; }
.grid-s9m0 .col-extra { display: none; }

.grid-m0s9 .main-wrap { margin-right: 250px; margin-left: 0; border-right: 1px solid #DCDCD7; }
.grid-m0s9 .col-sub { width: 250px; margin-left: -250px; margin-right: 0; }
.grid-m0s9 .col-extra { display: none; }

.grid-s12m0 .main-wrap { margin-left: 370px; margin-right: 0; border-left: 1px solid #DCDCD7; }
.grid-s12m0 .col-sub { width: 370px; margin-left: -100%; margin-right: 0; }
.grid-s12m0 .col-extra { display: none; }

.grid-m0s12 .main-wrap { margin-right: 370px; margin-left: 0; border-right: 1px solid #DCDCD7; }
.grid-m0s12 .col-sub { width: 370px; margin-left: -370px; margin-right: 0; }
.grid-m0s12 .col-extra { display: none; }

/** 三栏布局 **/
.grid-s6m0e9 .main-wrap { margin: 0 250px 0 200px; border-left: 1px solid #DCDCD7; }
.grid-s6m0e9 .col-sub { width: 200px; margin-left: -100%; }
.grid-s6m0e9 .col-extra { width: 250px; margin-left: -251px; border-left: 1px solid #DCDCD7; }

.grid-s9m0e6 .main-wrap { margin: 0 200px 0 250px; border-left: 1px solid #DCDCD7; }
.grid-s9m0e6 .col-sub { width: 250px; margin-left: -100%; }
.grid-s9m0e6 .col-extra { width: 200px; margin-left: -201px; border-left: 1px solid #DCDCD7; }

.grid-m0e9s6 .main-wrap { margin-right: 451px; border-right: 1px solid #DCDCD7; }
.grid-m0e9s6 .col-sub { width: 200px; margin-left: -200px; }
.grid-m0e9s6 .col-extra { width: 250px; margin-left: -451px; border-right: 1px solid #DCDCD7; }

